<template>
  <div class="share-detail">
    <div class="nav-bar">
      <i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i>
    </div>
    <div class="main-box">
      <div v-if="shareDetail.id" class="share-item">
        <div class="content">
          <div class="title">{{ shareDetail.title }}</div>
          <div class="info">
            <div class="avatar">
              <img :src="baseURL + shareDetail.author.avatar" alt="" />
            </div>
            <div class="author">
              <span>{{ shareDetail.author.nickname }}</span>
              <div class="time">{{ formatTime(shareDetail.created_at) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content" ref="content"></div>
    </div>
    <div class="comment-box">
      <div class="title">
        评论<span>{{ comments.total }}</span>
      </div>
      <div class="feed">
        <div class="comment-item" v-for="item in comments.list" :key="item.id">
          <div class="info-box">
            <img :src="baseURL + item.author.avatar" />
            <div class="name-box">
              <span class="name">{{ item.author.nickname }}</span>
              <span class="time">{{ formatTime(item.created_at) }}</span>
            </div>
            <div class="zan-box">
              <span class="zan">{{ item.star }}</span>
              <van-icon class="icon" name="good-job-o" />
            </div>
          </div>
          <div class="content-box">
            <div class="content">{{ item.content }}</div>
            <div v-if="item.children_comments.length > 0" class="reply-box">
              <div
                @click.stop="showReply(item.id)"
                class="reply"
                v-for="rep in item.children_comments"
                :key="rep.id"
              >
                <span class="name">{{ rep.author }}:</span>
                {{ rep.content }}
              </div>
            </div>
          </div>
        </div>

        <div class="finish">没有更多了</div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="input" @click.stop="showSend = true">我来补充两句</div>
      <div class="star" :class="{ active: collectactive }">
        <van-icon class="icon" @click="addCollect" name="star-o" />{{
          shareDetail.collect
        }}
      </div>
      <div class="zan" :class="{ active: staractive }">
        <van-icon
          class="icon"
          @click="addStar"
          ref="star"
          name="good-job-o"
        />{{ shareDetail.star }}
      </div>
      <div class="share">
        <van-icon
          @click.stop="showShare = true"
          class="icon"
          ref="share"
          name="share-o"
        />{{ shareDetail.share }}
      </div>
    </div>

    <van-overlay :show="showShare" @click="showShare = false">
      <!-- 分享图 -->
      <div v-if="showShare" class="share-img">
        <img src="../assets/share.png" />
      </div>
    </van-overlay>

    <!-- 遮罩层 -->
    <div v-show="showSend" class="popContainer"></div>
      <!-- 评论框 -->
      <div ref="input" v-if="showSend" class="input-pop">
        <div class="van-filed">
          <div class="van-cell_value">
            <div class="van-field_body">
              <textarea
                class="van-field_control"
                autofocus="autofocus"
                placeholder="我来补充两句"
                rows="4"
                v-model="textcom"
              ></textarea>
            </div>
            <span @click="addComment">发送</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import {
  shareDetail,
  articleComments,
  collectExp,
  starExp,
  postComment
} from '@/api/skill'
// import { getToken } from '@/utils/storage'
export default {
  data () {
    return {
      shareDetail: {},
      id: this.$route.params.id,
      comments: [],
      showSend: false,
      showShare: false,
      textcom: '',
      collectactive: false,
      staractive: false,
      parent: ''
    }
  },
  created () {
    this.loadData()
    this.loadComments()
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'van-field_control') {
        this.showSend = false
      }
    })
  },
  methods: {
    showReply (id) {
      this.showSend = true
      this.parent = id
    },
    async addComment () {
      if (this.textcom === '') {
        this.$toast('评论不能为空')
        return
      }
      if (this.parent === '') {
        const res = await postComment({
          content: this.textcom,
          article: this.id
        })
        console.log(res)
      } else {
        const res = await postComment({
          content: this.textcom,
          article: this.id,
          parent: this.parent
        })
        console.log(res)
      }
      this.loadComments()
      this.textcom = ''
      this.$toast('评论成功！')
    },
    async loadData () {
      const res = await shareDetail(this.id)
      console.log('1', res)
      this.shareDetail = res.data
      this.$refs.content.innerHTML = this.shareDetail.content
    },
    formatTime (date) {
      return this.dayjs(date).format('YYYY.MM.DD')
    },
    async loadComments () {
      const res = await articleComments(this.id)
      this.comments = res.data
      console.log('2', res)
    },
    async addCollect () {
      const res = await collectExp({ id: this.id })
      console.log(res)
      // eslint-disable-next-line eqeqeq
      if (res.data.num == 1) {
        this.collectactive = true
      } else {
        this.collectactive = false
      }
      this.loadData()
      this.$toast('成功！')
    },
    async addStar () {
      const res = await starExp({ article: this.id })
      // eslint-disable-next-line eqeqeq
      if (res.data.num == 1) {
        this.staractive = true
      } else {
        this.staractive = false
      }
      this.loadData()
      this.$toast('成功！')
    }
  }
}
</script>

<style lang="less" scoped>
.share-detail {
  // 遮罩层样式
  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .nav-bar {
    padding: 10px 10px;
    text-align: left;
    border-bottom: 0.5px solid #ebedf0;
    .iconfont {
      font-size: 25px;
      color: #3a3a3a;
    }
  }
  .main-box {
    padding: 10px 20px;
    font-size: 16px;
    .share-item {
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          text-align: left;
        }
        .info {
          color: #b4b4bd;
          font-size: 12px;
          align-items: center;
          margin-top: 20px;
          text-align: left;
          display: flex;
          .avatar {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .author {
            span {
              font-size: 13px;
              color: #000;
            }
          }
        }
      }
    }
    .main-content {
      padding-top: 20px;
      text-align: left;
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    }
  }
  .comment-box {
    margin-top: 10px;
    padding: 20px 20px;
    text-align: left;
    .title {
      font-size: 18px;
      position: relative;
      text-align: left;
      span {
        color: #b4b4bd;
        font-size: 13px;
        position: absolute;
        left: 40px;
        top: -2px;
      }
    }
    .feed {
      .comment-item {
        .info-box {
          margin-top: 20px;
          display: flex;
          align-items: center;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .name-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .name {
              font-size: 13px;
              color: #545671;
              font-weight: 600;
            }
            .time {
              font-size: 12px;
              color: #b4b4bd;
            }
          }
          .zan-box {
            .zan {
              font-size: 12px;
              color: #b4b4bd;
              margin-right: 4px;
            }
            .icon {
              color: #b4b4bd;
              font-size: 20px;
            }
          }
        }
        .content-box {
          padding-left: 45px;
          .content {
            margin-top: 10px;
            font-size: 15px;
            color: #181a39;
            line-height: 20px;
          }
          .reply-box {
            margin-top: 10px;
            padding-left: 7px;
            padding-bottom: 5px;
            background-color: #f7f4f5;
            .reply {
              font-size: 14px;
              color: #545671;
              padding-top: 5px;
              .name {
                margin-right: 3px;
              }
            }
          }
        }
      }
      .finish {
        color: #969799;
        font-size: 13px;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 100px;
      }
    }
  }
  .bottom-box {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 95px;
    display: flex;
    box-sizing: border-box;
    padding: 5px 10px 0;
    background-color: #fff;
    width: 100%;
    justify-content: space-between;
    color: #b4b4bd;
    .active {
      color: red;
    }
    .input {
      height: 35px;
      background-color: #f7f4f5;
      border-radius: 4px;
      flex: 1;
      font-size: 14px;
      margin-top: 25px;
      padding-left: 10px;
      text-align: left;
      line-height: 35px;
    }
    .star,
    .zan,
    .share {
      font-size: 14px;
      margin-left: 20px;
      text-align: center;
      margin-top: 20px;
      .icon {
        display: block;
        font-size: 23px;
      }
    }
  }
  .input-pop {
    height: 15%;
    z-index: 2003;
    padding: 20px 10px;
    // overflow: hidden;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    .van-filed {
      height: 65px;
      width: 90%;
      background: #f7f4f5;
      border-radius: 5px;
      padding: 10px 10px;
      .van-cell_value {
        color: #323233;
        text-align: left;
        position: relative;
        vertical-align: middle;
        span {
          position: fixed;
          bottom: 5px;
          right: 15px;
          color: #cbc7cb;
        }
        .van-field_body {
          display: flex;
          align-items: center;
          .van-field_control {
            height: 60px;
            // width: 100%;
            color: #323233;
            font-size: 14px;
            text-align: left;
            background-color: transparent;
            border: 0;
            resize: none;
          }
        }
      }
    }
  }
  .share-img {
    height: 90%;
    width: 85%;
    z-index: 3000;
    background-color: #000;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
